/**
 * 学习目标：样式处理 - 外部样式
 * 语法： style = {{ css属性名: 值 }}
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './base.css';

const divNode = (
  <>
    {/* style 有两个花括号，第一个代表的是 插值表达式 */}
    {/* react 中不支持连字符，要写成驼峰 */}
    {/* react 中 px 单位可以省略，直接写数字即可 */}
    <div style={{ color: 'red', fontSize: 50 }}>
      我是div - 红色字体 - 字体50大小
    </div>
    {/* 👍👍 工作中也推荐使用 外部样式 */}
    <div className="box">我是行内样式div - 蓝色字体 - 字体50大小</div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
